/**
 * @Author: Your name
 * @Date:   2023-03-16 10:14:21
 * @Last Modified by:   Your name
 * @Last Modified time: 2023-03-16 11:04:53
 */

var vm = new Vue({
    el: '#app',
    data() {
        //这里存放数据
        return {
            date: '',
            fisrtLoad: true,
            initData: [],
            domainList: [],
            // 查询条件
            query: {
                domain: null,
                name: null
            },
            // 历史记录
            cookiesList: [],
            // 输入建议
            domainDict: [],
            // 输入建议
            nameDict: [],
            // 收藏列表
            collectionList: JSON.parse(localStorage.getItem('COOKIES_COLLECTION')),
        }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 收藏详情
        handleCollectDetail(tag) {
            this.query.name = tag.name
            this.getSearch()
        },
        // 重置收藏
        handleCollectRemoveAll() {
            this.collectionList = []
            localStorage.removeItem('COOKIES_COLLECTION')
        },
        // 取消收藏
        handleCollectRemove() {

        },
        // 收藏
        handleAddMark(index, row) {
            let old = localStorage.getItem('COOKIES_COLLECTION')
            if (old) {
                let oldCollectionList = JSON.parse(old)
                oldCollectionList.push(row)
                localStorage.setItem('COOKIES_COLLECTION', JSON.stringify(oldCollectionList))
            }
            else {
                let newCollectionList = []
                newCollectionList.push(row)
                localStorage.setItem('COOKIES_COLLECTION', JSON.stringify(newCollectionList))
            }
            console.log(`index.js 44`, old);
            this.collectionList = JSON.parse(localStorage.getItem('COOKIES_COLLECTION'))
        },
        // 复制
        handleCopy(index, data) {
            console.log(`handleCopy ~ data`, data);
            // 存储传递过来的数据
            let copyText = data;
            // 创建一个input 元素
            // createElement() 方法通过指定名称创建一个元素
            let newInput = document.createElement("input");
            // 讲存储的数据赋值给input的value值
            newInput.value = copyText;
            // appendChild() 方法向节点添加最后一个子节点。
            document.body.appendChild(newInput);
            // 选中input元素中的文本
            // select() 方法用于选择该元素中的文本。
            newInput.select();
            // 执行浏览器复制命令
            //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
            document.execCommand("Copy");
            // 清空输入框
            newInput.remove();
            // 下面是element的弹窗 不需要的自行删除就好
            this.$message({
                message: "复制成功",
                type: "success",
            });
        },
        // 删除
        handleRemove(index, row) {
            console.log(`handleDelete ~ row`, row);
            let details = {
                url: 'http://'+row.domain,
                name: row.name,
                storeId: row.storeId,
            }
            chrome.cookies.remove(details, (res) => {
                this.$message({
                    message: "删除成功",
                    type: "success",
                });
                this.getSearch()
            })
        },
        // cookies记录
        getSearch() {
            let { domain, name } = this.query
            let query = {}
            query.domain = domain ? domain : null
            query.name = name ? name : null
            chrome.cookies.getAll(query, (data) => {
                
                if (this.fisrtLoad) {
                    // 缓存所有数据
                    this.initData = data
                    // 去重获取domianList
                    this.domainList = _.uniqBy(data, 'domain')
                    this.fisrtLoad = false
                }
                this.cookiesList = data
            })
        },
        // 重置查询
        resetSearch() {
            this.query.domain = null
            this.query.name = null
            this.getSearch()
        },
        // 初始化时间
        initDate() {
            let date = new Date()
            let year = date.getFullYear()
            // 月份
            let month = date.getMonth() + 1
            // 日
            let day = date.getDate()
            // 时
            let hours = date.getHours()
            // 分
            let minutes = date.getMinutes()
            // 秒
            let seconds = date.getSeconds()
            month = month < 10 ? '0' + month : month
            day = day < 10 ? '0' + day : day
            hours = hours < 10 ? '0' + hours : hours
            minutes = minutes < 10 ? '0' + minutes : minutes
            seconds = seconds < 10 ? '0' + seconds : seconds
            this.date = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
            // 一秒刷新一次
            setInterval(() => {
                this.initDate()
            }, 1000);
        },

        // 写入cookies
        handleAddCookies(index) {
            console.log(` ====>>> 162 this.cookiesList[index]`,this.cookiesList[index])
            // 弹出输入框
            this.$prompt('请输入写入域名', '写入cookies提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^[\s\S]*$/,
                // inputValue: this.cookiesList[index].domain,
                inputValue: 'localhost',
                inputErrorMessage: 'cookies不能为空'
            }).then(({ value }) => {
                const str = JSON.stringify(this.cookiesList[index])
                const newCookies = JSON.parse(str)
                newCookies.domain = value
                console.log(`handleAddCookies  newCookies:`, newCookies)
                // 写入cookies
                chrome.cookies.set(newCookies, (res) => {
                    this.$message({
                        message: "写入成功",
                        type: "success",
                    });
                })
            }
            ).catch((err) => {
                console.log(`取消输入  err:`, err)
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            }
            );
            
        }
    },

    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getSearch()
        this.initDate()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
});
